<template>
  <div class="page42" v-loading="loading">
    <div class="page-title">全省对标（收入完成）</div>
    <div class="page-content">
      <div class="left-text">
        <div>主营预算进度(%)</div> 
        <div>同比增长(%)</div> 
      </div>
      <LineChart class="line-chart" :chartData="chartData1" :title="['主营预算进度(%)', '同比增长(%)']"></LineChart>
    </div>
    <div class="page-content">
      <div class="left-text">
        <div>码号增长(%)</div> 
        <div>产数拉动(pp)</div> 
      </div>
      <LineChart class="line-chart" :chartData="chartData2" :title="['码号增长(%)', '产数拉动(pp)']"></LineChart>
    </div>
    <div class="page-content">
      <div class="left-text">
        <div>码号进度(%)</div> 
        <div>产数进度(%)</div> 
      </div>
      <LineChart class="line-chart" :chartData="chartData3" :title="['码号进度(%)', '产数进度(%)']"></LineChart>
    </div>
  </div> 
</template>
<script>
import { $budgetAPI } from "@/api";
export default {
  components: {
    LineChart: () => import("./charts/page42Chart.vue")
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
  },
  data(){
    return {
      loading: false,
      chartData1: [[],[],[]],
      chartData2: [[],[],[]],
      chartData3: [[],[],[]],
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      $budgetAPI.getCountyOperationPage42(
        { 
          token: this.form.token, 
          acctMonth: this.form.month,
          classLevel: this.form.classLevel
        },
        res => {
          if(res.code == 0){
            const { one, two, three } = res.content;
            this.chartData1 = [[],[],[]];
            this.chartData2 = [[],[],[]];
            this.chartData3 = [[],[],[]];
            one.forEach(it => {
              this.chartData1[0].push(it.latnName + "\n\n" + it.areaName);
              this.chartData1[1].push(it.thisMonthComplete);
              this.chartData1[2].push(it.tbYearInrease);
            });
            two.forEach(it => {
              this.chartData2[0].push(it.latnName + "\n\n" + it.areaName);
              this.chartData2[1].push(it.mhLd);
              this.chartData2[2].push(it.csLd);
            });
            three.forEach(it => {
              this.chartData3[0].push(it.latnName + "\n\n" + it.areaName);
              this.chartData3[1].push(it.mhJd);
              this.chartData3[2].push(it.csJd);
            });
          }
          this.loading = false;
        },
        err => {
          console.log(err);
          this.loading = false;
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.page42 {
  padding: 20px 10px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
  }
  .page-content {
    margin-top: 20px;
    display: flex;
    .left-text {
      width: 90px;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 120px;
      text-align: center;
    }
    .line-chart {
      flex: 1;
      height: 260px;
    }
  }
}
</style>